<template>
  <el-dialog v-if="visible" title="账号" v-model="visible" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false" width="400px">
    <el-form class="userForm" ref="formRef" :model="accountData.form" label-width="80px" label-position="left" :status-icon="true" :show-message="false">
      <el-form-item label="账号" prop="accNo" required>
        <el-input v-model="accountData.form.accNo" placeholder="请输入账号" clearable class="third_input" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password" :rules="{ required: !accountData.form.supplierAccountId ? true : false, validator: validatePassword, trigger: 'blur' }">
        <el-input :placeholder="accountData.form.supplierAccountId ? '不填则不修改' : '请输入密码'" class="third_input" v-model="accountData.form.password" type="password" autocomplete="off" show-password/>
      </el-form-item>

      <el-form-item label="账号别名" prop="accAliasName" required>
        <el-input class="third_input" v-model="accountData.form.accAliasName" placeholder="请输入账号别名" clearable />
      </el-form-item>
      <el-form-item label="角色" prop="authorityIds" required>
        <el-select class="employee-authority" v-model="accountData.form.authorityIds" placeholder="请选择角色" clearable multiple>
          <el-option v-for="item in accountData.authorityList" :key="item.supplierAuthorityId" :label="item.authorityName" :value="item.supplierAuthorityId" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <Button label="取消" @click="onCancelClick" />
      <Button label="确认" type="primary" @click="onSubmitClick" />
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, onMounted, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/api'
import Button from '@/components/button/button.vue'

const emit = defineEmits(['update:visible', 'change'])
const props = defineProps(['visible', 'form'])

const visible = computed({
  get: () => {
    return props.visible
  },
  set: (value) => emit('update:visible', value)
})

const accountData = reactive({
  form: {},
  authorityList: []
})

const loading = ref(false)
const formRef = ref()

watch(
  () => props.form,
  (val) => {
    if (val) {
      accountData.form = val
    } else {
      accountData.form = {}
    }
  }
)

const validatePassword = (rule, value, callback) => {
  let reg = /^(?=.*[a-z].*)(?=.*[A-Z].*)(?=.*[0-9].*)[a-zA-Z0-9^%&*@#,;\=\?\!$]{6,15}$/
  if (value === '' || reg.test(value)) {
    callback()
  } else {
    callback(new Error())
  }
}

const authorData = async () => {
  let { data, err } = await api.get('/medinstrument/third/authority/all')
  if (err) {
    ElMessage.error(err)
  } else {
    accountData.authorityList = data.authorityList
  }
}

const onCancelClick = () => {
  visible.value = false
}

const onSubmitClick = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      emit('change', accountData.form)
      visible.value = false
    }
  })
}

onMounted(() => {
  authorData()
})
</script>
<style lang="scss" scoped>
.userForm {
  .el-select {
    width: 100%;
  }
}
</style>
